<template>
  <div>
    <el-button type="primary" v-if="sys_role" @click="dialogFormVisible = true">添加角色<i class="iconfont iconxinzeng"></i>
    </el-button>

    <el-dialog title="添加角色" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="80px">
        <el-form-item label="角色名称" prop="role_name">
          <el-input placeholder="角色名称" v-model="ruleForm.role_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="describes">
          <el-input maxlength="50" placeholder="最大长度50位" v-model="ruleForm.describes" autocomplete="off"></el-input>
        </el-form-item>

   
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          立即添加</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="标识" property="qx" width="50">
      </el-table-column>
      <el-table-column label="角色名称" property="role_name">
        <template slot-scope="scope">
          <el-input v-if="isEdit == scope.row.role_name" v-model="scope.row.role_name" maxlength="255"
            placeholder="请输入内容"></el-input>
          <span v-else>{{scope.row.role_name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色描述" property="describes">
        <template slot-scope="scope">
          <el-input v-if="isEdit ==  scope.row.role_name" v-model="scope.row.describes" maxlength="50"
            placeholder="请输入内容"></el-input>
          <span v-else>{{scope.row.describes}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" v-if="sys_role" width="200">
        <template slot-scope="scope">

          <span v-if="isEdit == scope.row.role_name ">
            <el-button type="info" plain icon="el-icon-close" @click="cancel(scope.$index , scope.row)" circle>
            </el-button>
            <el-button type="success" icon="el-icon-check" plain @click="save" circle></el-button>

          </span>
          <span style="margin-right: 10px;" v-else>
            <el-button type="primary" icon="el-icon-edit" v-if="sys_role" @click="handleEdit(scope.$index , scope.row)">
            </el-button>
          </span>
          <el-button type="danger" icon="el-icon-delete" v-if="sys_role" @click="handleDelete(scope.$index, scope.row)">
          </el-button>

        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>


<script>
  import {
    ApiPowerRoles,
    ApiPoweraddRoles,
    // ApiPowerdelRoles,
  } from "../../../api/api";
  export default {
    data() {
      var validateUser = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入角色名称"));
        } else {
          callback();
        }
      };
      var validatemiao = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入角色描述"));
        } else {
          callback();
        }
      };
      return {
        tableData: [],
        sys_role: false,
        dialogFormVisible: false,
        isEdit: "",
        ruleForm: {
          role_name: "",
          describes: "",
        },
        rules: {
          role_name: [{
            validator: validateUser,
            trigger: "blur",
          }, ],
          describes: [{
            validator: validatemiao,
            trigger: "blur",
          }, ],
        },
      };
    },
    created() {
      this.request();
    },

    methods: {
      request() {
        ApiPowerRoles().then(async (res) => {
          this.tableData = res.data;
          this.sys_role = res.qx.indexOf(1) > -1 ? true : false;
        });
      },

      quxiao(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            ApiPoweraddRoles({
              role_name: this.ruleForm.role_name,
              describes: this.ruleForm.describes,
            }).then((res) => {
              if (res.code == 200) {
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();
                this.request();
                this.$message({
                  message: res.message,
                  type: "success",
                });
              } else {
                this.$message({
                  message: res.message,
                  type: "warning",
                });
              }
            });
          }
        });
      },
      handleEdit(index, row) {
        // for (const i of this.tableData) {
        //   if (i.role_name == row.role_name) return this.$message.warning('请先保存当前编辑项')
        //   }

        this.isEdit = row.role_name;
      },
      cancel(index, row) {
        this.isEdit = "";
      },
      save() {
        console.log("保存");
      },
      // handleDelete(index, row) {
      //   this.$confirm(`将删除"${row.role_name}"此角色, 是否确定?`, "提示", {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       closeOnClickModal: false,
      //       type: "warning",
      //       center: true,
      //     })
      //     .then(() => {
      //       ApiPowerdelRoles({
      //         role_name: row.role_name,
      //       }).then((res) => {
      //         if (res.code == 200) {
      //           this.request();
      //           this.$message({
      //             type: "success",
      //             message: "删除成功!",
      //           });
      //         } else {
      //           this.$message({
      //             type: "warning",
      //             message: res.message,
      //           });
      //         }
      //       });
      //     })
      //     .catch(() => {});
      // },
    },
  };

</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
